import React, { Component } from 'react'
import { connect } from 'react-redux';
import { fromJS } from "immutable"; //把数据转为immutable对象，使用这个使用更要使用gget方法，使用set方法去变更state内容
 
import { actionCreators } from '../../../login/store'
import { InputItem, Toast, Button } from 'antd-mobile'
import { createForm } from 'rc-form'
import { LoginWrap } from '../style'
 
import UploadFile from '../../../../common/uploadFile'
import Header from '../../../../common/header'
let inputPattern = '';
class LoginForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imgArr: [],
        }
    }
    submit = () => {
        this.props.form.validateFields((error, value) => {
            if (!error) {
                let { imgArr } = this.state;
                let userInfo = Object.assign({}, { imgArr }, value)
                this.changeLocal(userInfo)
            } else {
                if (error['userName']) {
                    Toast.info('请输入用户名', 2)
                } else if (error['phone']) {
                    Toast.info('请输入正确的手机', 2)
                } else {
                    Toast.info('输入错误', 2)
                }
            }
        })
    }
    changeLocal(val) {
        let {userInfor}=this.props;
        
        userInfor.email = val.email;
        userInfor.imgUrl = val.imgArr[0].url;
        userInfor.userName = val.userName;
        userInfor.verifyText = val.phone;
       
        this.props.changeUserInfo(userInfor)
        Toast.info('信息修改成功', 2);
        setTimeout(() => {
            this.props.history.push("/person");
        }, 2000)
    }
    getImg(data) {
        const imgArr = [...data]
        this.setState({ imgArr })
    }
    render() {
        const { getFieldProps ,userInfor} = this.props.form;
        const { userName, verifyText, email, imgUrl } = userInfor;
        let date = [{ url: imgUrl }]
        return (
            <>  <Header />
                <LoginWrap>
                    <UploadFile date={date} getImg={this.getImg.bind(this)} />
                    <InputItem
                        {...getFieldProps('userName', {
                            rules: [{ required: true, pattern: inputPattern }],
                            initialValue: userName
                        })}
                        placeholder="用户名"
                        ref={el => (this.inputRef = el)}
                    />
                    <InputItem
                        {...getFieldProps('phone', {
                            rules: [{ required: true, pattern: inputPattern }],
                            initialValue: verifyText
                        })}
                        placeholder="手机号"
                        ref={el => (this.inputRef = el)}
                    />
                    <InputItem
                        {...getFieldProps('email', {
                            rules: [{ required: true, pattern: inputPattern }],
                            initialValue: email
                        })}
                        placeholder="邮箱"
                        ref={el => (this.inputRef = el)}
                    />
                    <Button type="primary" onClick={this.submit} style={{ 'margin': ".2rem 0" }}>  确认修改 </Button>
                </LoginWrap>
            </>)
    }
}
const mapStateToProps = (state, ownProps) => {
    state= fromJS(state);
    return {
        userInfor: state.getIn(["login", "userInfor"]).toJS(),
      
    };
};
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        changeUserInfo(data) {
            dispatch(actionCreators.changeUser(data))
        }
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(createForm()(LoginForm))
